import 'package:flutter/material.dart';
import 'package:flutter_snail/pages/category/category_item.dart';
import 'package:flutter_snail/pages/category/category_search_widget.dart';
import 'package:flutter_snail/pages/category/scanning_icon.dart';
import 'package:flutter_snail/ui/style/snail_color.dart';
import 'package:flutter_snail/ui/style/snail_text_style.dart';
import 'package:flutter_snail/widgets/tool/base_state.dart';

class CategoryPage extends StatefulWidget {
  const CategoryPage({Key? key}) : super(key: key);

  @override
  State<CategoryPage> createState() => _CategoryPageState();
}

class _CategoryPageState extends BaseState<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildAppBar(),
      body: _buildBody(),
    );
  }

  _buildAppBar() {
    return AppBar(
      centerTitle: true,
      title: const CateSearchWidget(),
      actions: const [ScanningIcon()],
    );
  }

  _buildBody() {
    return Padding(
      padding: const EdgeInsets.only(top: 10),
      child: CustomScrollView(
        physics: const ClampingScrollPhysics(),
        slivers: [
          _recommendView,
          _buildCategoryDivision(),
          _categoryView,
        ],
      ),
    );
  }

  /// 推荐视图
  Widget get _recommendView => SliverPadding(
        padding: padding,
        sliver: SliverGrid(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisSpacing: 20,
              crossAxisSpacing: 20,
              childAspectRatio: 1.8),
          delegate: SliverChildBuilderDelegate(
            (_, index) => CategoryItem(
                index: index,
                alignment: Alignment.center,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      '$index$index$index',
                      style: SnailTextStyle.white_18.copyWith(letterSpacing: 10),
                    ),
                    const SizedBox(height: 8),
                    Text(
                      '$index$index$index$index$index',
                      style: SnailTextStyle.white_14,
                    )
                  ],
                )),
            childCount: 4,
          ),
        ),
      );

  /// 分类视图
  Widget get _categoryView => SliverPadding(
        padding: const EdgeInsets.only(bottom: 10, left: 10, right: 10),
        sliver: SliverGrid(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, mainAxisSpacing: 20, crossAxisSpacing: 20),
          delegate: SliverChildBuilderDelegate(
            (_, index) => CategoryItem(
              index: index,
              child: Text('$index', style: SnailTextStyle.white_18),
            ),
            childCount: 48,
          ),
        ),
      );

  /// 分类分割占位
  _buildCategoryDivision() {
    return SliverPadding(
      padding: padding,
      sliver: SliverList(
        delegate: SliverChildListDelegate([
          SizedBox(
            height: 50,
            child: Row(
              children: [
                line,
                const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 10),
                  child: Text('分类', style: SnailTextStyle.greyCD_14),
                ),
                line,
              ],
            ),
          )
        ]),
      ),
    );
  }

  Widget get line => const Expanded(
      child: Divider(height: 1, thickness: 1, color: SnailColor.greyE6));

  EdgeInsetsGeometry get padding => const EdgeInsets.symmetric(horizontal: 10);
}
